<template>
  <div>
    <div class="header">
      <div class="header-img">
        <img src="../assets/logo.png" />
      </div>
      <div class="txt">
        <h3>商城后台管理系统</h3>
      </div>
      <div class="btn">
        <button @click="tc">退出</button>
      </div>
    </div>
    <el-container>
      <el-container>
        <el-aside style="width：0px">
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            unique-opened
            router
          >
            <div class="gang" @click="gang1">||||</div>
            <el-submenu
              :index="item.path"
              v-for="item in liebiao"
              :key="item.path"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{ item.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(red, i) in item.children"
                  :key="i"
                  :index="red.path"
                  >{{ red.authName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu></el-aside
        >
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      liebiao: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gang1() {
      this.isCollapse = !this.isCollapse;
      this.style = this.with;
    },
    tc() {
      localStorage.removeItem("token");
      this.$router.push("/");
    },
  },
  mounted() {
    this.$http.get("/menus").then((res) => {
      // console.log(res);
      this.liebiao = res.data;
    });
  },
};
</script>

<style lang="scss">
.header {
  width: 100%;
  height: 70px;
  background: rgb(102, 102, 102);
  display: flex;
}
.header-img {
  width: 10%;
  height: 100%;
  img {
    width: 50%;
    height: 100%;
    margin-left: 26px;
  }
}
.txt {
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 70px;
  color: aliceblue;
}
.btn {
  width: 70%;
  height: 100%;
  // background: crimson;
  button {
    width: 80px;
    height: 40px;
    margin-left: 90%;
    margin-top: 1.5%;
    border-radius: 10px 10px 10px 10px;
    border: none;
  }
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-submenu__title {
  font-size: 14px;
  color: #ffffff;
  padding: 0 20px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
.el-aside {
  // background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 0px;
  background: rgb(51, 55, 68);
}
.el-menu-item {
  font-size: 14px;
  color: #ffffff;
  padding: 0 20px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
.el-menu {
  border-right: solid 1px rgb(51, 55, 68);
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #333744;
}
.el-submenu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  background: rgb(51, 55, 68);
  color: aliceblue;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 610px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 200px;
  min-height: 400px;
}
// ::v-deep .element.style {
//   margin-bottom: 0px;
// }
::v-deep .el-radio-group {
  margin-bottom: 0px;
}
.el-aside {
  width: 200px !important;
}
.gang {
  width: 100%;
  height: 36px;
  background: rgb(152, 153, 153);
  text-align: center;
  line-height: 36px;
  color: rgb(0, 0, 0);
}
.el-radio-group {
  width: 100%;
  height: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 630px;
} 
</style>
